<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <link rel="stylesheet" href="exbox.css" />
	<title></title>
</head>
<body>
    <div class="cssbox">
        All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.
        <br />
        The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.
        <br />
        The box model allows us to place a border around elements and space elements in relation to other elements.
        <br />
        The image below illustrates the box model:
        <br />
    </div>
    <hr />
<p class="padding">All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.</p>
<p class="border1">The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.</p>
<p class="border2">The box model allows us to place a border around elements and space elements in relation to other elements.</p>
<p class="border3">text with border3 The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.</p>
<p class="border4">some text border</p>
<p class="margin1">some text</p>
<p class="margin1">some text</p>
<p class="margin2">some text margin2 text ttext long long long stext long long long sext long long long story</p>
<p class="margin1">some text</p>
<p class="margin3">some text margin3</p>
<p class="margin1">some text</p>

</body>
</html>
